<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>微信支付页</title>
    <link rel="icon" href="/assets/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css"/>

    <script src="js/vue.js" type="application/javascript"></script>
    <script src="js/axios.js" type="application/javascript"></script>
    <script src="js/base.js" type="application/javascript"></script>
</head>
<body>
<div id="app">
    <!--head-->
    <div class="top">
        <div class="py-container">
            <div class="shortcut">
                <ul class="fl">
                    <li class="f-item">爱思乐欢迎您！</li>
                    <li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
                </ul>
                <ul class="fr">
                    <li class="f-item">我的订单</li>
                    <li class="f-item space"></li>
                    <li class="f-item">我的爱思乐</li>
                    <li class="f-item space"></li>
                    <li class="f-item">爱思乐会员</li>
                    <li class="f-item space"></li>
                    <li class="f-item">企业采购</li>
                    <li class="f-item space"></li>
                    <li class="f-item">关注爱思乐</li>
                    <li class="f-item space"></li>
                    <li class="f-item">客户服务</li>
                    <li class="f-item space"></li>
                    <li class="f-item">网站导航</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="cart py-container">
        <!--logoArea-->
        <div class="logoArea">
            <div class="fl logo"><span class="title">收银台</span></div>

        </div>
        <!--主内容-->
        <div class="checkout py-container  pay">
            <div class="checkout-tit">
                <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{{order.orderId}}</span>
                </h4>
                <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{order.payment}}</em>元</span>
                <div class="clearfix"></div>
            </div>
            <div class="checkout-steps">
                <div class="fl weixin">微信支付</div>
                <div class="fl sao">
                    <p class="red">二维码已过期，刷新页面重新获取二维码。</p>
                    <div class="fl code">
                        <img src="img/erweima.png" alt="">
                        <div class="saosao">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                    <div class="fl phone">

                    </div>
                </div>
                <div class="clearfix"></div>
                <p><a href="javscript:" @click="paySuccess"> 已支付成功</a></p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
    $(function () {
        $("ul.payType li").click(function () {
            $(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
        })
    })
</script>
<script>
    new Vue({
        el: "#app",
        data: {
            order: {}
        },
        methods: {
            findOrderById(orderId) {
                axios.get(urls.find_order_byid + orderId, {}).then(res => {
                    if (!res.data.flag) {
                        alert(res.data.message);
                    } else {
                        this.order = res.data.data;
                    }
                })
            },
            paySuccess() {
                axios.put(urls.pay_order_success + this.order.orderId, {}).then(res => {
                    if (!res.data.flag) {
                        alert(res.data.message);
                    } else {
                        window.location.href = "paysuccess.html?orderId=" + this.order.orderId;
                    }
                })
            }
        },
        //页面加载时,执行查询
        created: function () {
            let orderId = GetRequest()['orderId']
            this.findOrderById(orderId);
        }
    })
</script>
</body>

</html>